<template>
  <div id="container" ref="parentContent">
    <div id="topo"></div>
  </div>
</template>

<script>
export default {
  name: "topo",
  props: ["nodeData"],
  data() {
    return {
      graph: undefined,
      canvasWidth: 0,
      canvasHeight: 0,
    };
  },
  mounted() {
    this.initChart();
    // this.initSize();
  },
  methods: {
    initChart() {
      const colors = [
        "rgb(64, 174, 247)",
        "rgb(108, 207, 169)",
        "rgb(157, 223, 125)",
        "rgb(280, 198, 74)",
        "rgb(221, 158, 97)",
        "rgb(141, 163, 112)",
        "rgb(115, 136, 215)",
        "rgb(133, 88, 219)",
        "rgb(203, 135, 226)",
        "rgb(227, 137, 163)",
      ];
      G6.registerEdge(
        "running-polyline",
        {
          afterDraw(cfg, group) {
            const shape = group.get("children")[0];
            const length = shape.getTotalLength();
            // let circleCount = Math.ceil(length / 40);
            let circleCount = 1;
            circleCount = circleCount === 0 ? 1 : circleCount;

            const _loop = function _loop(i) {
              const delay = Math.random() * 1000;
              const start = shape.getPoint(i / circleCount);
              const circle = group.addShape("circle", {
                attrs: {
                  x: start.x,
                  y: start.y,
                  r: 1,
                  fill: "#A0F3AF",
                  shadowColor: "#fff",
                  shadowBlur: 30,
                },
                name: "circle-shape",
              });
              circle.animate(
                (ratio) => {
                  ratio += i / circleCount;
                  if (ratio > 1) {
                    ratio %= 1;
                  }
                  const tmpPoint = shape.getPoint(ratio);
                  return {
                    x: tmpPoint.x,
                    y: tmpPoint.y,
                  };
                },
                {
                  repeat: true,
                  duration: 3000,
                  // easing: 'easeCubic',
                  delay,
                }
              );
            };

            for (let i = 0; i < circleCount; i++) {
              _loop(i);
            }
          },
        },
        "polyline"
      );
      const data = {
        nodes: [
          {
            id: "nodeA0",
            img: require("@/assets/images/comprehensiveSituation/topo-router.png"),
            type: "image",
            label: "路由器",
            size: 40,
            x: 280,
            y: 100,
            comboId: "A",
          },
          {
            id: "nodeA1",
            img: require("@/assets/images/comprehensiveSituation/topo-password.png"),
            type: "image",
            label: "密码机",
            x: 360,
            y: 100,
            size: 40,
            comboId: "A",
          },
          {
            id: "nodeA2",
            img: require("@/assets/images/comprehensiveSituation/topo-wg.png"),
            type: "image",
            label: "网关设备",
            x: 440,
            y: 100,
            size: 40,
            comboId: "A",
          },
          {
            id: "nodeA3",
            img: require("@/assets/images/comprehensiveSituation/topo-firewall.png"),
            type: "image",
            label: "防火墙",
            x: 520,
            y: 100,
            size: 40,
            comboId: "A",
          },
          {
            id: "nodeB1",
            img: require("@/assets/images/comprehensiveSituation/topo-hxjhj.png"),
            type: "image",
            label: "核心交换机",
            x: 280,
            y: 180,
            size: 40,
            comboId: "B",
          },
          {
            id: "nodeB2",
            img: require("@/assets/images/comprehensiveSituation/topo-safe.png"),
            type: "image",
            label: "安全保密产品",
            x: 360,
            y: 180,
            size: 40,
            comboId: "B",
          },
          {
            id: "nodeC1",
            img: require("@/assets/images/comprehensiveSituation/topo-firewall.png"),
            type: "image",
            label: "防火墙",
            x: 280,
            y: 260,
            size: 40,
            comboId: "C",
          },
          {
            id: "nodeC2",
            img: require("@/assets/images/comprehensiveSituation/topo-wg.png"),
            type: "image",
            label: "网关设备",
            x: 360,
            y: 260,
            size: 40,
            comboId: "C",
          },
          {
            id: "nodeC3",
            img: require("@/assets/images/comprehensiveSituation/topo-password.png"),
            type: "image",
            label: "密码机",
            x: 440,
            y: 260,
            size: 40,
            comboId: "C",
          },
          {
            id: "nodeC4",
            img: require("@/assets/images/comprehensiveSituation/topo-router.png"),
            type: "image",
            label: "路由器",
            x: 520,
            y: 260,
            size: 40,
            comboId: "C",
          },
          {
            id: "nodeD1",
            img: require("@/assets/images/comprehensiveSituation/topo-firewall.png"),
            type: "image",
            label: "防火墙",
            x: 280,
            y: 360,
            size: 40,
            comboId: "D",
          },
          {
            id: "nodeD2",
            img: require("@/assets/images/comprehensiveSituation/topo-jrjhj.png"),
            type: "image",
            label: "接入交换机",
            x: 360,
            y: 360,
            size: 40,
            comboId: "D",
          },
          {
            id: "nodeD3",
            img: require("@/assets/images/comprehensiveSituation/topo-zd.png"),
            type: "image",
            label: "终端",
            x: 440,
            y: 360,
            size: 40,
            comboId: "D",
          },
          {
            id: "nodeE1",
            img: require("@/assets/images/comprehensiveSituation/topo-service.png"),
            type: "image",
            label: "服务器",
            x: 30,
            y: 80,
            size: 35,
            comboId: "E",
          },
          {
            id: "nodeE2",
            img: require("@/assets/images/comprehensiveSituation/topo-safe.png"),
            type: "image",
            label: "安全\n保密产品",
            labelCfg: {
              position: "bottom",
              offset: 0,
            },
            x: 30,
            y: 140,
            size: 35,

            comboId: "E",
          },
          {
            id: "nodeE3",
            img: require("@/assets/images/comprehensiveSituation/topo-jrjhj.png"),
            type: "image",
            label: "接入交换机",
            x: 100,
            y: 110,
            size: 40,
            comboId: "E",
          },
          {
            id: "nodeE4",
            img: require("@/assets/images/comprehensiveSituation/topo-firewall.png"),
            type: "image",
            label: "防火墙",
            x: 160,
            y: 110,
            size: 40,
            comboId: "E",
          },
          {
            id: "nodeF1",
            img: require("@/assets/images/comprehensiveSituation/topo-software.png"),
            type: "image",
            label: "软件系统",
            x: 30,
            y: 240,
            size: 40,
            comboId: "E",
          },
          {
            id: "nodeF2",
            img: require("@/assets/images/comprehensiveSituation/topo-safe.png"),
            type: "image",
            label: "安全\n保密产品",
            labelCfg: {
              position: "bottom",
              offset: 0,
            },
            style: {
              fontSize: 8,
            },
            x: 30,
            y: 300,
            size: 40,
            comboId: "E",
          },
          {
            id: "nodeF3",
            img: require("@/assets/images/comprehensiveSituation/topo-service.png"),
            type: "image",
            label: "服务器",
            x: 30,
            y: 370,
            size: 40,
            comboId: "E",
          },
          {
            id: "nodeF4",
            img: require("@/assets/images/comprehensiveSituation/topo-jrjhj.png"),
            type: "image",
            label: "接入交换机",
            x: 100,
            y: 300,
            size: 40,
            comboId: "E",
          },
          {
            id: "nodeF5",
            img: require("@/assets/images/comprehensiveSituation/topo-firewall.png"),
            type: "image",
            label: "防火墙",
            x: 160,
            y: 300,
            size: 40,
            comboId: "E",
          },
          //     G
          {
            id: "nodeG1",
            img: require("@/assets/images/comprehensiveSituation/topo-firewall.png"),
            type: "image",
            label: "防火墙",
            x: 610,
            y: 130,
            size: 40,
            comboId: "G",
          },
          {
            id: "nodeG2",
            img: require("@/assets/images/comprehensiveSituation/topo-jrjhj.png"),
            type: "image",
            label: "接入\n交换机",
            x: 670,
            y: 130,
            size: 40,
            comboId: "G",
          },
          {
            id: "nodeG3",
            img: require("@/assets/images/comprehensiveSituation/topo-software.png"),
            type: "image",
            label: "软件系统",
            x: 750,
            y: 70,
            size: 40,
            comboId: "G",
          },
          {
            id: "nodeG4",
            img: require("@/assets/images/comprehensiveSituation/topo-safe.png"),
            type: "image",
            label: "安全\n保密产品",
            labelCfg: {
              position: "bottom",
              offset: 0,
            },
            x: 750,
            y: 130,
            size: 40,
            comboId: "G",
          },
          {
            id: "nodeG5",
            img: require("@/assets/images/comprehensiveSituation/topo-service.png"),
            type: "image",
            label: "服务器",
            x: 750,
            y: 200,
            size: 40,
            comboId: "G",
          },
          //     H
          {
            id: "nodeH1",
            img: require("@/assets/images/comprehensiveSituation/topo-wg.png"),
            type: "image",
            label: "网关设备",
            x: 610,
            y: 300,
            size: 40,
            comboId: "H",
          },
          {
            id: "nodeH2",
            img: require("@/assets/images/comprehensiveSituation/topo-password.png"),
            type: "image",
            label: "密码机",
            x: 670,
            y: 300,
            size: 40,
            comboId: "H",
          },
          {
            id: "nodeH3",
            img: require("@/assets/images/comprehensiveSituation/topo-router.png"),
            type: "image",
            label: "路由器",
            x: 750,
            y: 300,
            size: 40,
            comboId: "H",
          },
          {
            id: "nodeH4",
            img: require("@/assets/images/comprehensiveSituation/topo-firewall.png"),
            type: "image",
            label: "防火墙",
            x: 610,
            y: 360,
            size: 40,
            comboId: "H",
          },
          {
            id: "nodeH5",
            img: require("@/assets/images/comprehensiveSituation/topo-jrjhj.png"),
            type: "image",
            label: "接入交换机",
            x: 670,
            y: 360,
            size: 40,
            comboId: "H",
          },
          {
            id: "nodeH6",
            img: require("@/assets/images/comprehensiveSituation/topo-zd.png"),
            type: "image",
            label: "终端",
            x: 750,
            y: 360,
            size: 40,
            comboId: "H",
          },
        ],
        edges: [
          //   A区
          {
            source: "nodeA0",
            target: "nodeA1",
          },
          {
            source: "nodeA1",
            target: "nodeA2",
          },
          {
            source: "nodeA2",
            target: "nodeA3",
          },
          //   B区
          {
            source: "nodeB1",
            target: "nodeB2",
          },
          //  C区
          {
            source: "nodeC1",
            target: "nodeC2",
          },
          {
            source: "nodeC2",
            target: "nodeC3",
          },
          {
            source: "nodeC3",
            target: "nodeC4",
          },
          //      D区
          {
            source: "nodeD1",
            target: "nodeD2",
          },
          {
            source: "nodeD2",
            target: "nodeD3",
          },
          //     E区
          // {
          //   source: "nodeE1",
          //   target: "nodeE2",
          // },
          {
            source: "nodeE1",
            target: "nodeE3",
            // type: 'polyline',
            controlPoints: [
              { x: 60, y: 80 },
              { x: 60, y: 110 },
            ],
          },
          {
            source: "nodeE2",
            target: "nodeE3",
            // type: 'polyline',
            controlPoints: [
              { x: 60, y: 140 },
              { x: 60, y: 110 },
            ],
          },
          {
            source: "nodeE3",
            target: "nodeE4",
          },
          //    F区
          /* {
            source: "nodeF1",
            target: "nodeF2",
          },
          {
            source: "nodeF2",
            target: "nodeF3",
          }, */
          {
            source: "nodeF1",
            target: "nodeF4",
            // type: 'polyline',
            controlPoints: [
              { x: 60, y: 240 },
              { x: 60, y: 300 },
            ],
          },
          {
            source: "nodeF2",
            target: "nodeF4",
            // type: 'polyline',
            controlPoints: [
              { x: 60, y: 300 },
              { x: 60, y: 300 },
            ],
          },
          {
            source: "nodeF3",
            target: "nodeF4",
            // type: 'polyline',
            controlPoints: [
              { x: 60, y: 370 },
              { x: 60, y: 300 },
            ],
          },
          {
            source: "nodeF4",
            target: "nodeF5",
          },
          //     G区
          {
            source: "nodeG1",
            target: "nodeG2",
          },
          {
            source: "nodeG2",
            target: "nodeG3",
            // type: 'polyline',
            controlPoints: [
              { x: 700, y: 130 },
              { x: 700, y: 70 },
            ],
          },
          {
            source: "nodeG2",
            target: "nodeG4",
          },
          {
            source: "nodeG2",
            target: "nodeG5",
            // type: 'polyline',
            controlPoints: [
              { x: 700, y: 130 },
              { x: 700, y: 200 },
            ],
          },
          //    H区
          {
            source: "nodeH1",
            target: "nodeH2",
          },
          {
            source: "nodeH2",
            target: "nodeH3",
          },
          {
            source: "nodeH1",
            target: "nodeH4",
          },
          {
            source: "nodeH4",
            target: "nodeH5",
          },
          {
            source: "nodeH5",
            target: "nodeH6",
          },
          {
            source: "nodeB1",
            target: "nodeE4",
            // type: 'polyline',
            controlPoints: [
              { x: 215, y: 180 },
              { x: 215, y: 110 },
            ],
          },
          {
            source: "nodeB1",
            target: "nodeF5",
            // type: 'polyline',
            controlPoints: [
              { x: 215, y: 180 },
              { x: 215, y: 300 },
            ],
          },
          {
            source: "nodeB1",
            target: "nodeD1",
            // type: 'polyline',
            controlPoints: [
              { x: 215, y: 180 },
              { x: 215, y: 360 },
            ],
          },
          {
            source: "nodeB1",
            target: "nodeG1",
            // type: 'polyline',
            controlPoints: [
              { x: 280, y: 200 },
              { x: 565, y: 200 },
              { x: 565, y: 130 },
            ],
          },
          {
            source: "nodeB1",
            target: "nodeH4",
            // type: 'polyline',
            controlPoints: [
              { x: 280, y: 200 },
              { x: 565, y: 200 },
              { x: 565, y: 360 },
            ],
          },
        ],
        combos: [
          {
            id: "A",
            label: "上联接入区",
            labelCfg: {
              style: {
                fill: "#3B8BFF",
                padding: [3, 2, 3, 2],
              },
            },
            style: {
              fill: "transparent",
              stroke: '#496f33',
              padding: [5, 5, 25, 5],
              radius: 4,
              opacity: 0,
            },
            type: "rect",
          },
          {
            id: "B",
            label: "核心交换区",
            labelCfg: {
              style: {
                fill: "#3B8BFF",
                padding: [3, 2, 3, 2],
              },
            },
            style: {
              fill: "#3B8BFF",
              radius: 4,
              opacity: 0,
            },
            type: "rect",
          },
          {
            id: "C",
            label: "下联交换区",
            labelCfg: {
              style: {
                fill: "#3B8BFF",
                padding: [3, 2, 3, 2],
              },
            },
            style: {
              fill: "#3B8BFF",
              radius: 4,
              opacity: 0,
            },
            type: "rect",
          },
          {
            id: "D",
            labelCfg: {
              style: {
                fill: "#3B8BFF",
                padding: [3, 2, 3, 2],
              },
            },
            style: {
              fill: "#3B8BFF",
              radius: 4,
              opacity: 0,
            },
            type: "rect",
          },
        ],
      };
      // this.canvasWidth = document.getElementById("container").clientWidth;
      this.canvasHeight = document.getElementById("container").clientHeight;
      this.graph = new G6.Graph({
        container: "topo",
        width: 800,
        height: this.canvasHeight,
        defaultNode: {
          labelCfg: {
            style: {
              fill: "#fff",
            },
          },
          // type: 'image',
          // label: '我是测试',
        },
        defaultEdge: {
          // type: 'circle-running',
          type: "running-polyline",
          style: {
            stroke: "#3B8BFF",
            opacity: 0.5,
            lineWidth: 1,
          },
        },
        defaultCombo: {
          background: {
            padding: [3, 2, 3, 2],
          },
        },
      });
      const containerBox = data.nodes.find((element) => element.id == "nodeE1");

      this.graph.data(data);
      this.graph.render();
      this.graph.zoom(1);
    },
    // 测试--
    scaleNodesPoints(nodes, edges, graphSize) {
      const size = graphSize[0] < graphSize[1] ? graphSize[0] : graphSize[1];
      let minX = 99999999999999999;
      let maxX = -99999999999999999;
      let minY = 99999999999999999;
      let maxY = -99999999999999999;
      nodes.forEach(function (node) {
        if (node.x > maxX) maxX = node.x;
        if (node.x < minX) minX = node.x;
        if (node.y > maxY) maxY = node.y;
        if (node.y < minY) minY = node.y;
      });

      edges.forEach(function (edge) {
        const controlPoints = edge.controlPoints;
        controlPoints.forEach(function (cp) {
          if (cp.x > maxX) maxX = cp.x;
          if (cp.x < minX) minX = cp.x;
          if (cp.y > maxY) maxY = cp.y;
          if (cp.y < minY) minY = cp.y;
        });
      });

      const xScale = maxX - minX;
      const yScale = maxY - minY;
      nodes.forEach(function (node) {
        node.orix = node.x;
        node.oriy = node.y;
        node.x = ((node.x - minX) / xScale) * size;
        node.y = ((node.y - minY) / yScale) * size;
      });
      edges.forEach(function (edge) {
        const controlPoints = edge.controlPoints;
        controlPoints.forEach(function (cp) {
          cp.x = ((cp.x - minX) / xScale) * size;
          cp.y = ((cp.y - minY) / yScale) * size;
        });
      });
    },
    // ---  测试结束
    initSize() {
      const self = this; // 因为箭头函数会改变this指向，指向windows。所以先把this保存
      setTimeout(() => {
        // todo 浏览器窗口发生变化时
        window.onresize = function () {
          // todo 获取div parentContent 的宽度和高度
          this.canvasWidth = document.getElementById("container").clientWidth;
          this.canvasHeight = document.getElementById("container").clientHeight;
          // todo 修改画布的大小
          self.graph.changeSize(this.canvasWidth, this.canvasHeight);
          // todo 将图移动到画布中心位置
          self.graph.fitCenter();
        };
      }, 20);
    },
  },
};
</script>

<style lang="scss" scoped>
#container {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  #topo {
    width:800px;
    // padding: 0 0 0 2.6rem;
  }
}
</style>
